<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import applyForm from "./components/applyForm.vue";
import PageWrapper from "@/components/Wrapper";
import detailTable from "./components/detailTable.vue";
import operation from "./components/operation.vue";
import { setWarehouseInventoryAdjustAdd } from "@/api/warehouseInventoryAdjust";
import { useMessage } from "@/hooks/useMessage";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";

const { createNotification } = useMessage();
const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();
defineOptions({
  name: "warehouseInventoryAdjustAddDetail"
});
const tableData = ref([]);

const tableHeight = ref(0);
const pageWrapperRef = ref();
const applyFormRef = ref(null);
const tableRef = ref(null);
const preWarehouseCode = ref("");
const rows = ref(0);

onMounted(() => {
  pageWrapperRef.value.initData();
});

// 提交
const submitApply = () => {
  tableRef.value
    .validateForm()
    .then(() => {
      setWarehouseInventoryAdjustAdd(
        Object.assign({}, applyFormRef.value.getForm(), {
          itemList: tableRef.value.getTableData()
        })
      ).then(rsp => {
        if (rsp.code === 0) {
          createNotification({ type: "success", message: rsp.msg });
          multiTagsStore.handleTags("splice", route.path);
          router.back();
        }
      });
    })
    .catch(() => {
      createNotification({
        message: "请填写调出数量",
        type: "error"
      });
    });
};

const setTotalData = (data: any) => {
  rows.value = data.length;
};
</script>
<template>
  <div class="main_box">
    <PageWrapper
      ref="pageWrapperRef"
      v-model:height="tableHeight"
      :isShowBottom="false"
      :isShowLine="false"
    >
      <template #header>
        <applyForm
          ref="applyFormRef"
          v-model:preWarehouseCode="preWarehouseCode"
          :rows="rows"
        />
      </template>
      <template #content>
        <div class="table_box">
          <operation />
          <detailTable
            ref="tableRef"
            :list="tableData"
            :tableHeight="tableHeight"
            :preWarehouseCode="preWarehouseCode"
            @setTotalData="setTotalData"
          />
        </div>
      </template>
      <template #footer>
        <section
          class="flex flex-row justify-between pb-[16px] pt-[16px] pr-[24px] pl-[24px] bg-white rounded-t-[8px]"
        >
          <div class="flex flex-row" />

          <el-button type="primary" @click="submitApply">提交</el-button>
        </section>
      </template>
    </PageWrapper>
  </div>
</template>
<style lang="scss" scoped></style>
